<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="70%"
    >
      <div class="contentBox" :style="'height:' + (windowHeight - 200) + 'px'">
        <el-scrollbar class="page-component__scroll">
          <div class="orderBox">
            <div class="infoBox">
              <div class="infoDetail">
                <el-row :gutter="20">
                  <el-col :span="10"
                    ><div>
                      会议订单编号：{{ orderData.orderNumber }}
                    </div></el-col
                  >
                  <el-col :span="6"
                    ><div>
                      订单状态：{{ formatStatus(orderData.orderStatus) }}
                    </div></el-col
                  >
                  <el-col :span="8"
                    ><div>
                      <el-button
                        type="success"
                        size="small"
                        @click="doReceiving()"
                        v-if="orderData.orderStatus == 2"
                        >接单</el-button
                      >
                      <el-button
                        type="primary"
                        size="small"
                        @click="doApproval()"
                        v-if="
                          orderData.areaType == 2 && orderData.orderStatus == 3
                        "
                        >审批</el-button
                      >
                      <el-button
                        type="danger"
                        size="small"
                        @click="doReject()"
                        v-if="
                          orderData.areaType == 2 && orderData.orderStatus == 3
                        "
                        >驳回</el-button
                      >
                    </div></el-col
                  >
                </el-row>
              </div>
              <div class="infoTitle">
                <span>租赁公司</span>
              </div>
              <div class="infoDetail">
                <el-row :gutter="20">
                  <el-col :span="10"
                    ><div>公司名称：{{ orderData.companyName }}</div></el-col
                  >
                  <el-col :span="6"
                    ><div>联系人：{{ orderData.linkMan }}</div></el-col
                  >
                  <el-col :span="8"
                    ><div>联系方式：{{ orderData.linkPhone }}</div></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10"
                    ><div>
                      统一社会信用代码：{{ orderData.companyCode }}
                    </div></el-col
                  >
                  <el-col :span="6"
                    ><div>法人：{{ orderData.legalMan }}</div></el-col
                  >
                  <el-col :span="8"
                    ><div>
                      法人联系方式：{{ orderData.legalManPhone }}
                    </div></el-col
                  >
                </el-row>
              </div>
              <div class="infoTitle">
                <span>活动场地基础信息</span>
              </div>
              <div class="infoDetail">
                <el-row :gutter="20">
                  <el-col :span="10"
                    ><div>位置：{{ orderData.address }}</div></el-col
                  >
                  <el-col :span="8"
                    ><div>面积：{{ orderData.area }} ㎡</div></el-col
                  >
                </el-row>
              </div>

              <div class="infoTitle">
                <span>活动时间</span>

                <span
                  class="rightTxt"
                  v-if="
                    (orderData.orderStatus == -1 ||
                      orderData.orderStatus == 3) &&
                    orderData.areaType == 2
                  "
                  ><span class="redTxt">待定</span></span
                >
                <span class="rightTxt" v-else
                  >小计：<span class="redTxt">{{
                    orderData.rentMoney / 100
                  }}</span
                  >元</span
                >
              </div>
              <div class="infoDetail">
                <el-row
                  :gutter="20"
                  v-for="(item, index) in orderData.siteOrderTimeList"
                  :key="index"
                >
                  <div>
                    <el-col :span="8">
                      <div>活动日期：{{ item.siteDate }}</div>
                    </el-col>
                    <el-col :span="8">
                      <div>
                        活动时段：{{ formatTimeFrame(item.siteTimeFrame) }}
                      </div>
                    </el-col>
                  </div>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="10"
                    ><div>历时：{{ orderData.dateCountNumber }}天</div></el-col
                  >
                  <el-col :span="6"
                    ><div>价格：{{ orderData.dateCountPrice }}元</div></el-col
                  >
                </el-row>
              </div>
              <div class="infoTitle">
                <span>活动场地租赁保证金</span>
                <span
                  class="rightTxt"
                  v-if="
                    (orderData.orderStatus == -1 ||
                      orderData.orderStatus == 3) &&
                    orderData.areaType == 2
                  "
                  ><span class="redTxt">待定</span></span
                >
                <span class="rightTxt" v-else
                  >小计：<span class="redTxt">{{
                    orderData.earnestMoney / 100
                  }}</span
                  >元</span
                >
              </div>
              <div class="countNum">
                <span>应付金额（元）：</span>
                <span
                  class="rightTxt"
                  v-if="
                    (orderData.orderStatus == -1 ||
                      orderData.orderStatus == 3) &&
                    orderData.areaType == 2
                  "
                  ><span class="redTxt">待定</span></span
                >
                <span class="rightTxt" v-else
                  >小计：<span class="redTxt">{{ orderData.amount / 100 }}</span
                  >元</span
                >
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </el-dialog>
    <el-dialog
      title="审核信息"
      :visible.sync="approvalVisible"
      width="60%"
      :before-close="approvalClose"
    >
      <div>
        <el-form
          status-icon
          :model="approvalForm"
          ref="approvalForm"
          label-width="auto"
          :rules="approvalFormRules"
        >
          <el-row
            :gutter="20"
            v-for="(item, index) in approvalForm.dateTimeArr"
            :key="index"
          >
            <div>
              <el-col :span="8">
                <div class="formBox">
                  <el-form-item label="活动日期">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="item.meetingDate"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      :picker-options="option"
                      @change="dateChange(item, index)"
                    ></el-date-picker>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <el-form-item label="活动时段">
                    <el-select
                      v-model="item.meetingTimeFrame"
                      placeholder="请选择活动时段"
                      :disabled="item.meetingDate == ''"
                    >
                      <el-option
                        v-for="(it, index) in item.timeArr"
                        :key="index"
                        :label="it.label"
                        :value="it.value"
                        :disabled="it.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>

              <el-col :span="8">
                <div v-if="index == 0">
                  <el-button
                    type="text"
                    icon="el-icon-plus"
                    @click="addDateTime()"
                    >增加活动时间</el-button
                  >
                </div>
                <div v-else style="line-height: 40px">
                  <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    circle
                    @click="delDateTime(index)"
                  ></el-button>
                </div>
              </el-col>
            </div>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="价格" prop="rentMoney">
                <el-input v-model="approvalForm.rentMoney"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="租赁保证金" prop="earnestMoney">
                <el-input v-model="approvalForm.earnestMoney"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="approvalVisible = false">取 消</el-button>
        <el-button type="primary" @click="approvalSiteOrder()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="驳回订单"
      :visible.sync="rejectVisible"
      width="60%"
      :before-close="rejectClose"
    >
      <div>
        <el-form
          status-icon
          :model="rejectForm"
          ref="rejectForm"
          label-width="auto"
          :rules="rejectFormRules"
        >
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="驳回原因" prop="rejectId">
                <el-select
                  v-model="rejectForm.rejectId"
                  placeholder="请选择驳回原因"
                  @change="handleRejectChange"
                >
                  <el-option
                    v-for="(item, index) in rejectList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="备注" prop="rejectRemark">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入备注"
                  v-model="rejectForm.rejectRemark"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rejectVisible = false">取 消</el-button>
        <el-button type="primary" @click="rejectSiteOrder()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import * as meeting from "@/api/meeting/meeting.js";
export default {
  props: {
    visible: {
      typeof: Boolean,
      default: false,
    },
    id: {
      typeof: String,
      default: "",
    },
  },
  watch: {
    id: {
      immediate: true,
      handler(value) {
        console.log(value);
        if (this.visible) {
          this.findMeetOrderAdminDetail();
        }
      },
    },
    visible(val) {
      if (val) {
        this.dialogVisible = val;
      }
    },
    windowHeight(val) {
      let that = this;
      // console.log("实时屏幕高度：", val, that.windowHeight);
    },
  },
  data() {
    return {
      approvalVisible: false,
      rejectVisible: false,
      rejectList: [
        {
          value: 0,
          label: "",
        },
      ],
      windowHeight: document.documentElement.clientHeight, //实时屏幕高度
      dialogVisible: false,
      orderData: {
        areaType: "",
        amount: null,
        companyCode: "",
        companyId: null,
        companyName: "",
        earnestMoney: null,
        helpServeMoney: null,
        id: null,
        legalMan: "",
        legalManPhone: "",
        linkMan: "",
        linkPhone: "",
        siteOrderTimeList: [],
        orderNumber: "",
        orderStatus: null,
        orderTakeId: null,
        orderTakenTime: null,
        plcMeetinRoomId: null,
        rentMoney: null,
        tenantId: null,
        dateCountNumber: null,
        dateCountPrice: null,
      },
      dialogTitle: "订单详情",
      timeArr: [
        {
          label: "上午09:00-12:00",
          value: 1,
          disabled: false,
        },
        {
          label: "下午14:00-18:00",
          value: 2,
          disabled: false,
        },
        {
          label: "全天09:00-18:00",
          value: 3,
          disabled: false,
        },
      ],
      statusList: [
        {
          dictValue: -1,
          dictName: "已驳回",
        },
        {
          dictValue: 1,
          dictName: "待支付",
        },
        {
          dictValue: 2,
          dictName: "已支付",
        },
        {
          dictValue: 3,
          dictName: "待定价",
        },
        {
          dictValue: 4,
          dictName: "已接单",
        },
      ],
      rejectForm: {
        rejectId: null,
        rejectName: "",
        rejectRemark: "",
      },
      approvalForm: {
        rentMoney: "",
        earnestMoney: "",
        dateTimeArr: [
          {
            meetingDate: "",
            meetingTimeFrame: null,
            timeArr: [
              {
                label: "上午09:00-12:00",
                value: 1,
                disabled: false,
              },
              {
                label: "下午14:00-18:00",
                value: 2,
                disabled: false,
              },
              {
                label: "全天09:00-18:00",
                value: 3,
                disabled: false,
              },
            ],
          },
        ],
      },
      approvalFormRules: {
        // type: [
        //   {
        //     type: "array",
        //     required: true,
        //     message: "请至少选择一个活动性质",
        //     trigger: "change",
        //   },
        // ],

        rentMoney: [{ required: true, message: "请填写租金", trigger: "blur" }],
        earnestMoney: [
          { required: true, message: "请填写保证金", trigger: "blur" },
        ],
      },
      rejectFormRules: {
        rejectId: [
          { required: true, message: "请选择驳回原因", trigger: "change" },
        ],
        rejectRemark: [
          { required: true, message: "请填写备注", trigger: "blur" },
        ],
      },
      option: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() + 2 * 24 * 3600 * 1000;
        },
      },
    };
  },

  created() {},
  mounted() {
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        that.windowHeight = window.fullHeight; // 高
      })();
    };
    this.findSiteRejectList();
  },
  methods: {
    findMeetOrderAdminDetail() {
      let that = this;
      let data = {
        id: this.id,
      };
      meeting
        .findSiteOrderAdminDetail(data)
        .then((res) => {
          console.log(res);
          that.orderData = res.data.data;
          let tempList = res.data.data.siteOrderTimeList;
          let dayCount = 0;
          let priceCount = 0;
          for (let i = 0; i < tempList.length; i++) {
            if (tempList[i].meetingTimeFrame == 3) {
              dayCount += 1;
              priceCount += 1500;
            } else {
              dayCount += 0.5;
              priceCount += 800;
            }
          }
          this.orderData.dateCountNumber = dayCount;
          this.orderData.dateCountPrice = priceCount;
        })
        .catch((err) => {});
    },
    approvalSiteOrder() {
      this.$refs["approvalForm"].validate((valid) => {
        if (valid) {
          let tempList = this.approvalForm.dateTimeArr;
          let tempSiteTimeList = [];
          for (let i = 0; i < tempList.length; i++) {
            if (
              tempList[i].meetingDate != "" &&
              tempList[i].meetingTimeFrame != ""
            ) {
              let tempObj = {
                siteDate: tempList[i].meetingDate + " 00:00:00",
                siteTimeFrame: tempList[i].meetingTimeFrame,
              };
              tempSiteTimeList.push(tempObj);
            }
          }
          if (tempSiteTimeList.length > 0) {
            let data = {
              earnestMoney: this.approvalForm.earnestMoney,
              id: this.id,
              rentMoney: this.approvalForm.rentMoney,
              siteTimeList: tempSiteTimeList,
            };
            meeting
              .sureSiteOrderPrice(data)
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "审批成功!",
                });
                this.findMeetOrderAdminDetail();
                this.approvalVisible = false;
              })
              .catch((err) => {});
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    rejectSiteOrder() {
      this.$refs["rejectForm"].validate((valid) => {
        if (valid) {
          let data = {
            rejectId: this.rejectForm.rejectId,
            rejectName: this.rejectForm.rejectName,
            rejectRemark: this.rejectForm.rejectRemark,
            id: this.id,
          };
          meeting
            .rejectSiteOrderPrice(data)
            .then((res) => {
              this.$message({
                type: "success",
                message: "驳回成功!",
              });
              this.findMeetOrderAdminDetail();
              this.rejectVisible = false;
            })
            .catch((err) => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    doReceiving() {
      this.$confirm("请确认是否接单", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: this.id,
          };
          meeting
            .takeSiteOrderAdmin(data)
            .then((res) => {
              this.$message({
                type: "success",
                message: "接单成功!",
              });
              this.findMeetOrderAdminDetail();
            })
            .catch((err) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消接单",
          });
        });
    },
    doApproval() {
      this.approvalVisible = true;
    },
    doReject() {
      this.rejectVisible = true;
    },
    approvalClose(done) {
      done();
    },
    rejectClose(done) {
      done();
    },
    findSiteRejectList() {
      meeting
        .findSiteRejectList()
        .then((res) => {
          this.rejectList = [];
          console.log(res.data.data);
          for (let i = 0; i < res.data.data.length; i++) {
            let tempObj = {
              label: res.data.data[i].name,
              value: res.data.data[i].id,
            };
            this.rejectList.push(tempObj);
          }
          console.log(this.rejectList);
        })
        .catch((err) => {});
    },
    handleClose(done) {
      this.$emit("on-close");
      done();
    },
    close() {
      this.$emit("on-close");
      this.dialogVisible = false;
    },
    addDateTime() {
      let temObj = {
        meetingDate: "",
        meetingTimeFrame: null,
        timeArr: [
          {
            label: "上午09:00-12:00",
            value: 1,
            disabled: false,
          },
          {
            label: "下午14:00-18:00",
            value: 2,
            disabled: false,
          },
          {
            label: "全天09:00-18:00",
            value: 3,
            disabled: false,
          },
        ],
      };
      this.approvalForm.dateTimeArr.push(temObj);
    },
    delDateTime(idx) {
      this.approvalForm.dateTimeArr.splice(idx, 1);
    },
    handleRejectChange(obj) {
      console.log(obj);
      for (let i = 0; i < this.rejectList.length; i++) {
        if (this.rejectList[i].value == obj) {
          this.rejectForm.rejectName = this.rejectList[i].label;
        }
      }
    },
    dateChange(item, idx) {
      let data = {
        id: this.id, //roomID
        day: item.meetingDate,
      };
      meeting
        .findDayLeaseSiteInfo(data)
        .then((res) => {
          console.log(res);
          if (res.data.meetingTimeFrame == 1) {
            item.timeArr[0].disabled = true;
            item.timeArr[2].disabled = true;
          } else if (res.data.meetingTimeFrame == 2) {
            item.timeArr[1].disabled = true;
            item.timeArr[2].disabled = true;
          } else if (res.data.meetingTimeFrame == 3) {
            item.timeArr[0].disabled = true;
            item.timeArr[1].disabled = true;
            item.timeArr[2].disabled = true;
          }
          this.$set(this.approvalForm.dateTimeArr, idx, item);
        })
        .catch((err) => {});
    },
    formatStatus(cellValue) {
      if (cellValue) {
        let _types = this.statusList || [];
        let _obj =
          _types.find((value, index) => {
            return value.dictValue === cellValue;
          }) || {};
        return _obj.dictName || "";
      } else {
        return "/";
      }
    },
    formatTimeFrame(cellValue) {
      if (cellValue) {
        let _types = this.timeArr || [];
        let _obj =
          _types.find((value, index) => {
            return value.value === cellValue;
          }) || {};
        return _obj.label || "";
      } else {
        return "/";
      }
    },
  },
};
</script>
<style scoped>
.orderBox {
}
.pageTitle {
  text-align: center;
  margin-bottom: 10px;
  font-size: 20px;
}
.infoBox {
  margin: 0 auto;
  text-align: left;
}
.title {
  font-size: 20px;
  /* text-align: center; */
  line-height: 50px;
  padding: 0 20px;
  color: #66b1ff;
  font-weight: bold;
}
.infoTitle {
  padding: 0 20px;
  background: #c4c4c4;
  line-height: 40px;
  color: #262424;
}
.infoTitle span.rightTxt {
  float: right;
  font-size: 14px;
}
.infoTitle span.rightTxt .redTxt {
  color: #ff4c4c;
  padding: 0 5px;
}
.infoDetail {
  padding: 15px 20px;
  font-size: 14px;
  color: #666666;
  line-height: 30px;
}

.countNum {
  line-height: 50px;
  padding: 0 15px;
  background: #e7e6e6;
  color: red;
  text-align: right;
}
.countNum span.bigTxt {
  font-size: 1.1em;
}
.serviceCheckBox {
  margin-right: 30px;
}
.submitBox {
  width: 1068px;
  margin: 0 auto;
  text-align: right;
  margin-top: 50px;
}
.page-component__scroll {
  height: 100%;
}
.page-component__scroll >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
.formBox >>> .el-date-editor.el-input,
.formBox >>> .el-date-editor.el-input__inner {
  width: 100%;
}
</style>

